<style lang="scss">
.services {
  .el-main {
    padding: 0px 16px 16px 16px;
  }
  .el-tabs {
    width: 100%;
    .el-tabs__header {
      margin: 16px 16px 12px 16px;
      .el-tabs__item.is-active {
        border-bottom: 2px solid #409eff;
      }
    }
  }
}

</style>

<template>
  <el-container class="services">
    <!-- 状态导航 -->
    <el-tabs v-model="activeTabState" type="card" @tab-click="tabClick">
      <el-tab-pane name="111">
        <span slot="label">
          <i class="el-icon-date"></i> 超期件
        </span>
        <inquire-overdue ref="inquireOverdue"></inquire-overdue>
      </el-tab-pane>
      <el-tab-pane name="222">
        <span slot="label">
          <i class="el-icon-zoom-out"></i> 退回件
        </span>
        <inquire-back ref="inquireBack"></inquire-back>
      </el-tab-pane>
      <el-tab-pane name="333">
        <span slot="label">
          <i class="el-icon-scissors"></i> 不满意件
        </span>
        <inquire-satify ref="inquireSatify"></inquire-satify>
      </el-tab-pane>
          <el-tab-pane name="444">
        <span slot="label">
          <i class="el-icon-star-off"></i> 紧急件
        </span>
        <inquire-important ref="inquireImportant"></inquire-important>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
import inquireOverdue from './inquire-overdue.vue'
import inquireBack from './inquire-back.vue'
import inquireSatify from './inquire-satify.vue'
import inquireImportant from './inquire-important.vue'

export default {
  data () {
    return {
      activeTabState: '111'
    }
  },
  methods: {
    // tab 点击
    tabClick (tab, event) {
      switch (tab.name) {
        case '111':
          this.$refs.inquireOverdue.initFn()
          break
        case '222':
          this.$refs.inquireBack.initFn()
          break
        case '333':
          this.$refs.inquireSatify.initFn()
          break
        case '444':
          this.$refs.inquireImportant.initFn()
          break
      }
    }
  },
  components: {
    inquireOverdue,
    inquireBack,
    inquireSatify,
    inquireImportant
  }
}
</script>
